<head>
    <meta charset="UTF-8">
    <title>AC聊天室</title>
    <link rel="shortcut icon" href="css/icon.png">
</head>


<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    #msgbox{
      border:0;border-radius:5px;background-color:rgba(241,241,241,.98);width: auto;height: auto;padding: 10px;
    }
    body{
      height: 100%;    
    	background: #38a047;
    }
      .btn {
      /* 文字颜色 */
      color: #0099CC; 
      /* 清除背景色 */
      background: transparent; 
      /* 边框样式、颜色、宽度 */
      border: 2px solid #0099CC;
      /* 给边框添加圆角 */
      border-radius: 6px; 
      /* 字母转大写 */
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
      text-decoration: none;
      text-transform: uppercase;
}
.btn1 {
      background-color: white; 
      color: black; 
      border: 2px solid #008CBA;
      width: 100px;
}
/* 悬停样式 */
.btn1:hover {
      background-color: #008CBA;
      color: white;
}
        input{
                border: 1px solid #ccc;
                padding: 7px 0px;
                border-radius: 3px;
                padding-left:5px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
            }
            input:focus{
                    border-color: #66afe9;
                    outline: 0;
                    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
            }
  </style>
  <style type="text/css">
    #area{
     position:fixed;
     width:160px;
     right:-160px;
     top:27%;}
    #small_menu ul {
     list-style: none;
    }
    #area #on{
     position: absolute;
     top: 40%;
     right: 100%;
     width: 30px;
     height: 30px;
     cursor: pointer;
     border-radius: 15px;
     background-color: rgba(13, 143, 143, 0.2);
     }
    #area #on p{
     font-size:30px;
     text-align:center;
     margin-top:-6px;
     color:#01E290;
     }
    #area #small_menu {
     width:100%;
     } 
    #area #small_menu ul li {
     width:auto;
     height: auto;
     text-align:left;
     background-color: rgba(2, 27, 38, 0.62);
     border-top: 1px solid #043B46;
     line-height: 44px;
    }
    #area #small_menu ul li a{
     text-decoration: none; 
     margin-left:30px;
     color: #bfbfbf;
     font-size:16px;
     font-family: 'Microsoft Yahei';
     }
    #area #small_menu li.active {
     width: auto; 
     background-color: rgba(2, 27, 38, 0.87);
     border-left: 4px solid #00ffff;
     border-top: 0px;
    }
    #area #small_menu li.active a{
     color: #00ffff;
     }
     
    
    </style>
<header style="background-color: rgba(0, 60, 20, 10);">
    <br/>
    <!-- <p class="logo" style="
    "> -->
    <!-- <center><a href="#2"><button width='120%'>GO!</button></a></center> -->
    <nav class="site-nav" style="height:10%;text-align: center;"><center>
      
      <center>
      <ul id="c">
          <li id="c2"><img src="css/icon.png" width="6%" alt="icon"></li>
        <li id="c2"><a href="https://amazingcode.top">首页</a></li>
        <li id="c2"><a href="http://127.0.0.1:127">聊天</a></li>
        <li id="c2"><a href="">登录</a></li>
        <li id="c2"><a href="">注册</a></li>
        <li id="c2"><a href="">支持</a></li>
      </ul></center>
    </nav>
  </header>
<br>
<div id='2' style="height: 70%;">
    
<div id="msgbox">
<form action="http://127.0.0.1:127/chat" method="get">
<input class="" type="text" name="name"required placeholder="用户名" style="width: 100%;"><br>
<textarea style="resize: none;width: 100%;height: 200px;" placeholder="说点什么吧" name="content"required></textarea>
<br><br style="font-size: smaller;">
<center><input type="submit" value="发送 " class="btn1"></center>


</form>
</div>

$add$ 
<!-- 信息显示区 -->
</div>
<div id="area">
  <div id="small_menu">
   <ul>
    <li><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=1346706976&auto=1&height=66"></iframe></li>
    
   </ul>     
  </div>  
  <div id="on" onclick="xuanfu();"><p>+</p></div> 
 </div>
<!-- 
<div id="bottom" style="width: 100%;background-color: cadetblue;color: cyan;height: 5%;bottom: 0px;position: fixed;">
  <center>本网站由 AC工作室室长 ZH-Y-Q 和 AC工作室副室长 AC工作室toby 制作</center>
</div> -->
<script>
  //嵌套在页面中，文档初始化时加载。
   
   var menubox = document.getElementById("area"); //area为菜单栏的id
   var cli_on = document.getElementById("on"); //on为按钮
   var flag = false, timer = null, initime = null, r_len = 0;
   
   if(menubox.style.right=== 0){
    flag = true;
    }
   else{
    flag = false;
    }
   cli_on.onclick = function () {
    //为on按钮绑定click事件
    clearTimeout(initime);
    //根据状态flag执开展开收缩
    if (flag) {
     r_len = 0;
     timer = setInterval(slideright, 10);
    } else {
     r_len = -160;
     timer = setInterval(slideleft, 10);
    }
   }
   //展开
   function slideright() {
    if (r_len <= -160) {
     clearInterval(timer);
     flag = !flag;
     return false;
    }else{
     r_len -= 5;
     menubox.style.right = r_len + 'px';
    }
   }
   //收缩
   function slideleft() {
    if (r_len >= 0) {
     clearInterval(timer);
     flag = !flag;
     return false;
    } else {
     r_len += 5;
     menubox.style.right = r_len + 'px';
    }
   } 
   
  </script>